Skip to main content
Minh Nong
💬
0 discussions

[Shell] React-Native

Tích hợp với Android và Ios

I. Chức năng​

  • Người dùng có thể thực hiện cuộc gọi thông qua App ở chế độ Foreground
  • [Rnd] Người dùng có thể thực hiện cuộc gọi/ nhận cuộc gọi khi App ở Background
  • [Rnd] Người dùng có thể điều khiển load của thiết bị ở loa to và loa nhở hoặc tại nghe, thiết bị bluetooth ( speakers / earpiece speaker)

II. Cài đặt​

1. Android​

2. Ios​

IV. Fastlane - Gitlab runner (Mobile Devops)​

  • File fastlane/secret.sh : Gitlab Runner sẽ chạy file này để tải keystore, playstore key và firebase key từ Digital Ocean
  • Gitlab Runner sẽ dựng môi trường Android như ở local và tự cài đặt, đọc file .gitlab-ci.yml ở ReactNative Repo
  • Khi thực hiện merge vào branch Test, gitlab runner sẽ dựng môi trường sau đó tự chạy fastlane. Fastlane sẽ buildApp và gửi đến Tester thông qua Firebase App Distribution
  • Khi thực hiện merge vào branch master, gitlab runner sẽ dựng môi trường sau đó tự chạy fastlane. Fastlane sẽ buildApp và Public App lên Store

  BASE_URL_MASTER=      // Omnibox Prod URL
  BASE_URL_TEST=        // Omnibox Test URL
  DIGITAL_ACCESS_KEY=   // DIGITAL_ACCESS_KEY OF Digital Ocean to download Obj Storage
  DIGITAL_SECRET_KEY=   // DIGITAL_SECRET_KEY OF Digital Ocean to download Obj Storage
  FIREBASE_AUTH_FILE=   // path to firebase Auth file
  PLAYSTORE_AUTH_FILE=  // path to playstore auth file
  RELEASE_KEY_ALIAS=    
  RELEASE_KEY_PASSWORD=
  RELEASE_STORE_FILE=   // path to playstore.key
  RELEASE_STORE_FILE_NAME=
  RELEASE_STORE_PASSWORD=

Quy trình phát triển mobile app cho Android​

1. Quy trình Dev của kỹ sư ở Local​

  • Kỹ sư clone project, theo các hướng dẫn cài đặt ở local và thực hiện Dev theo quy trình sau:

    • 1 . Clone Project
    • 2 . Tạo Dev con từ Test theo cú pháp trên sơ đồ
    • 3 . Thực hiện phát triển tính năng cho dự án
    • 4 . Commit code, và push lên gitlab

2. Quy trình Ops ( Thao tác trên Gitlab )​

  • Kỹ sư tham khảo sơ đồ sau:
- Phần background màu vàng thể hiện phần công việc chỉ liên quan đến vai trò của Dev
- Phần background màu xanh thể hiện phần công việc liên quan đến vai trò của nhiều người khác nhau

  • 1 . Phần màu vàng

    • Kỹ sư vào Gitlab, tạo branch Test con từ Test
    • Kỹ sư tạo merge request từ Dev con sang Test con
    • Kỹ sư tự review code của mình và Merge

  • 2 . Phần màu xanh, phần này mô tả công việc vào ngày thứ 6 (Deploy Demo), và PROD DAY (Deploy PROD)

    • Kỹ sư vào Gitlab thao tác, tạo merge request từ Test con sang Test sau đó Assign StageOwner vào Review
    • Vào thứ 6, sau khi kỹ sư có vai trò stage owner thực hiện review và merge code từ Test con vào Test. Gitlab Runner sẽ được trigger sau đó dựng môi trường Linux, Android, và kích hoạt Fastlane chạy những phần liên quan đến Test, như build app, gửi App đến test qua qua mail thông qua firebase app distribution
    • Vào PROD DAY, sau khi kỹ sư có vai trò stage owner thực hiện review mà merge code từ Test vào master. Gitlab Runner sẽ được trigger sau đó dựng môi trường Linux, Android, và kích hoạt Fastlane chạy những phần liên quan đến PROD, như build app, public App lên PlayStore

  • 3 . Các lỗi thường gặp trong quá trình deploy Demo và Prod

    • Trong quá trình Deploy Test, đôi khi fastlane sẽ không kết nối được với Firebase : pineline của gitlab runner sẽ fail

      • Một số cách xử lý:

        • Không Gấp: Thử distribute App từ local bằng fastlane, test key của firebase, nếu không được bình thường hay do lỗi từ phía Firebase -> vài giờ sau vào restart pineline

        • Gấp : dùng fastlane build apk/ abb ở Local sau đó vào Firebase App destribution và thực hiện manual Upload

  • Trong quá trình Deploy Prod, đôi khu fastlane sẽ không kết nối được với Playstore, pineline của gitlab runner sẽ fail

    • Một số cách xử lý:

      • Không gấp: Thử Public App từ local bằng fastlane, test key của Playstore, nếu không được bình thường hay do lỗi từ Playstore -> vài giờ sau vào restart pineline

      • Gấp : dùng fastlane build ở local, sau đó upload App manual lên Playstore. Release Prod, xem doc Android Shell

V. OmniPush - Rnd (Cài đặt và sử dụng)​

Chức năng của omniPush dùng để xử lý remote push notification cho thiết bị di động

  • Usecase hiện tại, dùng push notification để trigger màn hình incoming call ở background

Hiện tại đang thử theo 2 cách, cách 1 dùng Cloudflare Worker (Serverless) để trigger Remote Push notification, cách 2 viết 1 server Nodejs

  • Cài đặt
  - Clone [OmniPush](https://gitlab.com/gcalls/rnd/omniPush) Repo

1. OmniPush Worker​

  cd omnipush-worker
  npm i

  npx wrangler dev        // Local
  npx wrangler deploy     // Push to CF worker

1.1 Worker KV​

Ở Workers & Pages -> Add 1 namespace, sau đó copy id bỏ vào Wranger.toml file để worker kết nối với KV

1.2 Config pbxWebhook​

  • Vào pbx chọn SIP cần Test, Advance -> Webhook

Thêm vào API để trigger FCM cho Android hay APNS (voIP cho IOS) của omnipush Worker

1.3 Cách Test trong quá trình Dev​

  • Có thể dev ở local sau đó dùng wranger deploy hoặc edit code trực tiếp để debug nhanh trên worker để dễ dàng thấy incoming call được trigger từ webhook

Vào worker chọn edit code sau đó thực hiện gọi incoming call để bắt log

1.4 Api​

Post device Token​
  • Route : /api/deviceToken
  • Method : POST
  • Body : sip, deviceToken
  • Return Format :
    • Success : 200 { success: true, data : data }
    • Failure : 400 { success: false, data : error }
Handle Pushnofication from webhook​
  • Route : api/fcm/send
  • Method : POST
  • Body : uuid, phoneNumber,appName,callType
  • Return Format :
    • Success : 200 { success: true, data : data }
    • Failure : 400 { success: false, data : error }

2. OmniPush Server​

  cd omnipush-ser
  npm i

2.1 ENV​

  TEAM_ID=
  KEY_ID=
  P8_KEY=
  REDIS_HOST=
  AUTH_TOKEN=
  FB_SER_KEY=  # FIREBASE SER KEY - Click vào 'Remote Push notification' ở III phía trên

TEAM_ID KEY_ID Và P8 KEY

2.2 Config pbxWebhook​

  • Vào pbx chọn SIP cần Test, Advance -> Webhook

Thêm vào API để trigger FCM cho Android hay APNS (voIP cho IOS) của omni PushSer

2.3 Api​

Post device Token​
  • Route : ${API_VERSION}/postDeviceToken
  • Method : POST
  • Body : sipDomain, deviceToken, voipDeviceToken, platform, appId
  • Return Format :
    • Success : 200 { success: true, deviceToken: pDeviceToken }
    • Failure : 400 { success: false, data : error }
Handle Pushnofication from webhook​
  • Route : ${API_VERSION}/doPushIncoming
  • Method : POST
  • Body : uuid, phoneNumber,appName,callType
  • Return Format :
    • Success : 200 { success: true, deviceToken: pDeviceToken }
    • Failure : 400 { success: false, data : error }

VI. Chi tiết về ReactNative Shell​

  • Reactnative Shell để tích hợp Omnibox(Web) vào ứng dụng di động
  • Được sử dụng cho User gọi điện trên thiết bị di động
  • Download app từ Playstore và Applestore

1. Mở App​

Khi User mở ReactNative , Omnibox được load thông qua Webview

  • Có thể whitelabel và whitelist thông qua domain từ Digital Ocean và CFR2

Xem sơ đồ sau

2. Auth - Login​

  • Omnibox tự xử lý cơ chế login thông qua Keycloak, Token được lưu và sử dụng cho API

Cơ chế của Login và Auth

3. Về cuộc gọi Inbound và Oubound ở Foreground​

3.1 Luồng cuộc gọi Omnibox sẽ tự xử lý​

  • Tham khảo sơ đồ xử lý cuộc gọi của Omnibox

3.2 Luồng âm thanh thông qua Omnibox điều khiển xuống ReactNative và Hardware​

Tại sao lại viết Native Module để điều khiển âm thanh

  • Lớp kết nối cuộc gọi PeerToPeer connection đang ở tầng webview, khi gọi không điều chỉnh được vào âm thanh vào earpiece Speaker ( Loa nhỏ ) nên phải tim cách điều chỉnh route âm thanh vào Earpice Speaker. Kiểm tra code Omnibox, cài thử các module có sẵn ở tầng ReactNative nếu cần

    Challenge :

  • Các thiết bị khác nhau có những behavior khác nhau, tìm cách để sử dụng được trên nhiều thiết bị

  • Chưa đấu nối hoàn toàn được các đường audio route từ âm thanh vào webview

3.3 Cơ chế Incoming cho App ở trạng thái Background hiện tại​

  • Cần cài đặt theo hướng dẫn ở bước V.

  • Sau khi login vào thiết bị, device sẽ được gửi lên OmniPush thông qua API

  • Khi có 1 cuộc gọi Incoming từ User vào Agent -> Pbx sẽ gửi thông tin cuộc gọi đến OmniPush thông qua Webhook

  • OmniPush dựa vào thông tin SIP để lấy deviceToken và Trigger Imcoming Native ở Mobile của Agent

Chuột phải mở image ở Newtab để xem rõ hơn

  • Tính năng này đang được phát triển ở Branch dev_NongMinh_Refactor, nhà phát triển có thê chuyển branch và test thử sau khi đã cài OmniPush ở bước trên

VII. Challenges​

  • Giữ Sip connection ở background, hay tìm các giải pháp nhận incoming ở lớp shell hay ruột
  • Tìm các giải pháp handle incoming call khi app ở background
  • Tham khảo brand dev_NongMinh_Refactor ở repo Reacnative cho custom backgroud Job của Android sử dụng ReactNative Headless khi App bị Kill nếu cần
  • Tham khảo config của repo sau về loại SIP mà sử dụng được cho mobile